<link rel="stylesheet" href="<?= $this->baseUrl() ?>/css/ui.datepicker.css"/>
<style>
    div.add{
        border: 1px #D3D3D3 outset;
        background-color: #e0f5e4;
        width: 80px;
        line-height: 1.6em;
        text-align: center;
        vertical-align: middle;
        padding-bottom: 3px;
    }
    div.add:hover{
        background-color: #ccccff;
    }
    div.add a{
        padding: 5px 7px;
        margin: 0px;
        color: black;
        text-decoration: none;
    }
    div.add a:visited{
        color: black;
    }
    div.add img{
        border-width: 0px;
        padding-right: 3px;
        padding-top: 2px;
        margin-bottom: -3px;
    }

    .suggestionsBox {
	position: absolute;
	left: 18em;
	margin: 10px 0px 0px 0px;
	width: 200px;
	background-color: #212427;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border: 2px solid #000;
	color: #ffffff;
    }

    .suggestionList {
	margin: 0px;
	padding: 0px;
    }
    .suggestionList li {

	margin: 0px 0px 3px 0px;
	padding: 3px;
	cursor: pointer;
    }
    .suggestionList li:hover {
	background-color: #659CD8;
    }
</style>

<script type="text/javascript" src="<?= $this->baseUrl() ?>/js/jq.date.js"></script>
  
<script type="text/javascript">

$(document).ready(function() {

	$('#date').datepicker({dateFormat: 'yy-mm-dd',
            clickInput:false}); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar

});
function searchDate() {
    var date=$('#date').val();
                        if(date.length > 0){
			$.post("search", {date: ""+date+"",type: "date",
                                          page:"date"},
                                        function(data){
                                       
				if(data.length >10) {
                                        
					//$('#tabledata').html(data);
                                       
                                        document.getElementById('tabledata').innerHTML = data;
				}else{
                                    
                                    document.getElementById('tabledata').innerHTML = 'Tidak ada kegiatan pada '+date;
                                }
			});
                        }
		
	}
</script>
<?php
$this->title = "Log Viewer";
$this->headTitle($this->title);
?>
<table><tr>
        <td><label  for="date">Cari:</label>

<input readonly='true' type="text" id="date" name="date"/></td>
        <td>
         <div class="add">
<a href="javascript: searchDate()">
Go!</a>
</div>   
        </td>
    </tr></table>
<br/>
<br/>

<div style="border-style: solid;" id="tabledata">
<?php foreach($this->log as $logs) : ?>
<p><?php echo "[".$this->escape($logs['time'])."] ".
               $this->escape($logs['username'])." ".$this->escape($logs['role'])
               ." ".$this->escape($logs['action']).""; ?></p>
<?php endforeach; ?>
</div>
